<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>插件 - {{count}}</h1>

    <hr>

    <child></child>
  </div>

  <script src="../Vue.js"></script>

  <script>
  const { createApp } = Vue;

  const Child = {
    inject: ["count"],
    template: `
      <div>这是子组件 - {{count}}</div>
    `,
    mounted() {
      console.log(this.abc);
      this.fn();
    }
  }
  
  const app = createApp({
    inject: ["count"],
    data() {
      return {}
    },
    components: {
      Child
    },
    mounted() {
      console.log(this.abc);
      this.fn();
    }
  })

  // 创建一个插件
  // 插件的真正的场景一般用于做整个项目的全局配置的
  const myPlugin = {
    install(app, options) {
      // 配置此应用
      // 添加一些全局实例属性或方法
      app.config.globalProperties.abc = 100;
      app.config.globalProperties.fn = () => {
        console.log("fn");
      }
      app.provide('count', 123)
    }
  }

  app.use(myPlugin)
  
  app.mount('#app')
</script>
</body>
</html>